﻿<div class="ui-box-simple">
    <div class="ui-box-simple-header">
        <h3>
            找回密码</h3>
        <p>
            小米帐户能使用小米手机、米聊、MIUI和小米的其他服务。如果您已拥有小米帐户，则可<a class="cor_yellow" href="/">在此登录</a></p>
    </div>
    <div class="ui-box-simple-container">
        <div class="tabbable">
            <ul class="nav nav-tabs pl-300 f-18">
                <li class="active"><a href="#1" data-toggle="tab">通过注册电子邮箱</a></li>
                <li><a href="#2" data-toggle="tab">通过已绑定手机</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="1">
                    <div class="passport-reset-password passport-reset-password-by-email">
                        <form id="form-reset-password-by-email" class="form-horizontal" method="post" action="/home/resetpassword/1">
                        <div class="control-group">
                            <label class="control-label" for="email">
                                邮 箱
                            </label>
                            <div class="controls">
                                <input type="text" id="email" name="email" class="watermark" maxlength="30" placeholder="电子邮箱"
                                    data-rel="popover" data-trigger="focus" data-original-title="温馨提醒" data-content="请输入您注册时使用的电子邮箱，我们会。" />
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="captcha">
                                验证码</label>
                            <div class="controls">
                                <input type="text" id="captcha" name="captcha" class="input-mini" maxlength="4" placeholder="验证码"
                                    autocomplete="off" data-rel="popover" data-trigger="focus" data-placement="left"
                                    data-title="温馨提醒" data-content="请输入图片中的字符，不区分大小写。" />
                                <img id="register-captcha-img" class="captcha-img" src="/home/forgotpasswordcaptcha"
                                    onclick="this.src='/home/forgotpasswordcaptcha?'+Math.random();" alt="点击刷新" />
                                <span class="captcha-img-refresh" onclick="document.getElementById('register-captcha-img').src='/home/forgotpasswordcaptcha?'+Math.random();">
                                    看不清<br />
                                    换一张</span>
                            </div>
                        </div>
                        <div class="form-actions border-none background-none">
                            <span class="ui-button ui-button-ok clearfix"><span class="ui-button-left">&nbsp;</span>
                                <button type="submit" class="ui-button-text">
                                    找 回 密 码</button><span class="ui-button-right">&nbsp;</span></span> <span id="register-message">
                                    </span>
                        </div>
                        </form>
                    </div>
                </div>
                <div class="tab-pane" id="2">
                    <div class="passport-reset-password passport-reset-password-by-mobile">
                        <form id="form-reset-password-by-mobile" class="form-horizontal" method="post" action="/home/resetpassword/2">
                        <div class="control-group">
                            <label class="control-label" for="mobile">
                                手机号码
                            </label>
                            <div class="controls">
                                <input type="text" id="mobile" name="mobile" class="input-medium" maxlength="11"
                                    placeholder="手机号码" />
                                <p id="help-mobile" class="help-inline">
                                    <a id="control-getsmscode" href="javascript:void(0);" onclick="getSmsCode();">获取短信验证码</a>
                                    <span id="control-timer"></span>
                                </p>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="smscode">
                                短信验证码
                            </label>
                            <div class="controls">
                                <input type="text" id="smscode" name="smscode" maxlength="6" placeholder="短信验证码" />
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="password">
                                新密码</label>
                            <div class="controls">
                                <input type="password" id="password" name="password" maxlength="12" placeholder="请输入您的新密码" />
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="confirmPassword">
                                确认新密码</label>
                            <div class="controls">
                                <input type="password" id="confirmPassword" name="confirmPassword" maxlength="12"
                                    placeholder="请再次输入您的新密码" />
                            </div>
                        </div>
                        <div class="form-actions border-none background-none">
                            <span class="ui-button ui-button-ok clearfix"><span class="ui-button-left">&nbsp;</span>
                                <button type="submit" class="ui-button-text">
                                    设置新密码</button><span class="ui-button-right">&nbsp;</span></span> <span id="register-message">
                                    </span>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ui-box-simple-footer">
        <p class="tc">
            您还可以拨打帮助热线：021-61065336，以获取人工帮助
        </p>
    </div>
</div>
@section css{
    @Url.Ayatta().StaticCss("sk.passport")
    @Url.Ayatta().StaticCss("jquery.fancybox")
}
@section js{
    @Url.Ayatta().StaticJs("jquery.validate.min")
    @Url.Ayatta().StaticJs("jquery.validate.extend")
    @Url.Ayatta().StaticJs("jquery.fancybox.pack")
    <script type="text/javascript">

        $(function () {
            $('[data-rel="popover"]').popover();
            //$('.typeahead').typeahead({ source: function () { return ["ddd", "daa"] } });
            //$('.captcha').captcha();
            $("#email").keyup(function () {
                var val = this.value;
                if (val.indexOf('@@') >= 0) {
                    val = val.substring(0, val.indexOf('@@'));
                }
                var availableTags = [val + "@@qq.com", val + "@@163.com", val + "@@sina.com", val + "@@sohu.com", val + "@@yahoo.cn", val + "@@gmail.com", val + "@@hotmail.com"];
                $(this).autocomplete({
                    source: availableTags
                });
            });
            $('#form-reset-password-by-email').validate({
                rules: { 'email': { required: true, email: true }, 'captcha': { required: true, rangelength: [4, 4]} },
                messages: { 'email': { required: '请输入邮箱！', email: '请输入邮箱！' }, 'captcha': { required: '请输入验证码!', rangelength: '请输入验证码!'} },
                submitHandler: function (form) {
                    var param = $(form).serialize();
                    $.postJSON(form.action, param, function (result) {
                        if (result.Status == true) {
                            var html = $.format("<a href='javascript:void(0);' onclick='reSend(\"{0}\");'>重新发送</a>", result.Message);

                            $("#reg-email").html($("#username").val());
                            //$('#myModal').modal({ backdrop: false, keyboard: false, show: true });
                            //$.fancybox.open({ href: '#myModal', type: 'inline', modal: true, padding: 0 });

                        }
                        else {
                            $("#register-message").html(result.Message);
                        }
                    });
                    return false;
                }
            });
            $("#form-reset-password-by-mobile").validate({
                rules: { 'smscode': { required: true, rangelength: [6, 6] }, 'password': { required: true, password: true }, 'confirmPassword': { required: true, password: true, equalTo: "#password"} },
                messages: { 'smscode': { required: '请输入短信验证码！', rangelength: '请输入正确的短信验证码！' }, 'password': { required: '请输入新密码！', password: '请输入符合格式的密码！' }, 'confirmPassword': { required: '请再次输入新密码！', password: '请输入符合格式的密码！', equalTo: "两次输入密码不一致！"} },
                submitHandler: function (form) {
                    var param = $(form).serialize();
                    $.postJSON(form.action, param, function (result) {
                        if (result.Status == true) {
                            //$.fancybox.open({ href: '#myModal', type: 'inline', modal: true, padding: 0 });
                        }
                        else {
                            //$("#register-message").html(result.Message);
                        }
                    });
                    return false;
                }
            });
        });
        
        function reSend(guid) {
            var url = "/register/resend";
            $.postJSON(url, { param: guid }, function (result) {
                if (result.Status == true) {
                    alert(0);
                }
                else {

                }
            });
        }
        function updateTimer() {
            var i = $("#resendtimer").html();
            if (i == 0) {
                $("#resendemail").removeClass('disabled').click(function () {
                    reSend();
                });
                return;
            }
            $("#resendtimer").html(i - 1);
            setTimeout(updateTimer, 1000);
        }
        function getSmsCode() {
            var mobile = document.getElementById('mobile').value;
            if (!mobile.isMobile()) {
                alert('请输入正确的手机号码');
            }
            else {
                $.postJSON('/home/smscode/1', { mobile: mobile }, function (result) {
                    if (result.Status == true) {
                        $("#control-getsmscode").hide();
                        $(".control-resetpassword").show();
                    }
                    else {
                        alert(result.Message);
                    }
                });
            }
        }
    </script>
}
